<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import gameStage from './stage/index.js';
import Loading from './components/loading.vue';
import PlayButton from './components/PlayButton.vue';

const gameContainerRef = ref();
const gameState = ref('loading'); // loading, ready, playing

const handleGameStateChange = (data) => {
  gameState.value = data.gameState;
};

const handlePlay = async () => {
  // 用户点击后开始游戏
  await gameStage.startGame();
  gameStage.loadingManager.setGameState('playing');
};

onMounted(async () => {
  gameStage.eventManager.on('gameStateChange', handleGameStateChange);
  
  // 只初始化和加载资源，不开始游戏
  await gameStage.init(gameContainerRef.value);
});

onUnmounted(() => {
  gameStage.eventManager.off('gameStateChange', handleGameStateChange);
});
</script>

<template>
  <div class="app-container">
    <div class="game-container" ref="gameContainerRef"></div>
    <Loading v-if="gameState === 'loading'" />
    <PlayButton v-if="gameState === 'ready'" @play="handlePlay" />
  </div>
</template>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
}

.game-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
</style>
